<template>
  <div class="right-side-container">
    <div v-if="store.currentComponentIndex === -1" class="content flex align-items-center justify-content-center">
      点击题型进行编辑
    </div>
    <div v-else>
      <EditPannel :com="currentCom" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useEditor } from '@/store/useEditor'
import EditPannel from '@/components/EditItems/EditPannel.vue'
import { computed, provide } from 'vue'
import {
  isPicTitleDescStatus,
  isPLink,
  type OptionProps,
  type PicLink,
  type PicTitleDescStatus,
  type statusType,
  type TextProps
} from '@/types'
import { EditorType } from '@/constants'
import { ElMessage } from 'element-plus'

const store = useEditor();
const currentCom = computed(() => store.editorComps[store.currentComponentIndex]);

const updateStatus = (configKey: EditorType, payload: statusType) => {
  const status = currentCom.value.status[configKey];

  try {
    switch (configKey) {
      case EditorType.title:
      case EditorType.desc:
      case EditorType.descColor:
      case EditorType.titleColor: {
        if (typeof payload !== 'string') {
          throw new Error('payload must be string');
        }
        store.setTextPropsStatus(status, payload);
        break;
      }
      case EditorType.options: {
        if (typeof payload === 'string') {
          store.addStringArrStatus(status, payload);
        } else if (typeof payload === 'number') {
          if (status.status.length <= 2) {
            ElMessage.error('选项数量不能少于2个');
            return;
          }
          store.removeOptionsArrStatus(status, payload);
          ElMessage.success('删除成功');
        } else if (isPLink(payload)) {
          store.setPicImageStatus(status, payload);
        } else if (isPicTitleDescStatus(payload)) {
          store.addOptionsStatus(status, <PicTitleDescStatus>payload);
        }
        break;
      }
      case EditorType.position:
      case EditorType.titleSize:
      case EditorType.descSize:
      case EditorType.titleWeight:
      case EditorType.descWeight:
      case EditorType.titleItalic:
      case EditorType.descItalic: {
        if (typeof payload !== 'number') {
          throw new Error('payload must be number');
        }
        store.setCurrentStatus(status as OptionProps, payload);
        break;
      }
      default:
        throw new Error(`Unknown configKey: ${configKey}`);
    }
  } catch (error) {
    console.error('Error in updateStatus:', error);
    ElMessage.error('操作失败，请检查输入');
  }
}

const updatePicLink = (link: PicLink) => {
  updateStatus(EditorType.options, link);
}

provide('updatePicLink', updatePicLink);
provide('updateStatus', updateStatus);
</script>

<style scoped>
.right-side-container {
  width: 320px;
  height: calc(100vh - 50px - 40px);
  position: fixed;
  right: 20px;
  top: 70px;
  background-color: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  overflow-y: scroll;
}
.content {
  height: 100%;
}
</style>
